import { useEffect, useState } from 'react';
import styles from './CityDetails.scss';
import { City, fetchCitys } from '@/services/users';

export default function CityDetails() {
  const [data, setData] = useState<City[]>([]);
  useEffect(() => {
    const {promise, abort} = fetchCitys();
    promise.then(setData);
    return abort;
  }, [fetchCitys]);
  return (
    <div className={styles.city}>
      {data.map((element: City, i) => {
        return (
          <p key={i}>
            {element.type + '--' + element.name + '--' + element.value}
          </p>
        );
      })}
    </div>
  );
}
